import React, { Component } from 'react';
import '@/assets/style/global.scss';
import {NavLink, Route} from 'react-router-dom';
import LinkPage from '@/pages/Link';
import IndexPage from '@/pages/IndexPage';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() { 
    return (
      <div>
        <div className="header" style={{backgroundColor: '#800', color: 'white'}}>header</div>
        <div className="wrapper">
          <div className="wrapper-left">
            <NavLink className="nav-link" activeClassName="nav-link-active" exact to="/">IndexPage</NavLink>
            <ul className="menu">
              <li><NavLink className="nav-link" activeClassName="nav-link-active" exact to="/1">link 1</NavLink></li>
              <li><NavLink className="nav-link" activeClassName="nav-link-active" exact to="/2">link 2</NavLink></li>
            </ul>
          </div>
          <div className="wrapper-right">
            <Route path="/" exact component={IndexPage}></Route>
            <Route path="/:id" component={LinkPage}></Route>
          </div>
        </div>
      </div>
    );
  }
}
 
export default App;